import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 放置vuex数据
    catagtory: [], // 定义数组
    currentCatagtory: '', // 定义当前的激活频道
    allData: { } // 频道1：list1 / 频道2： list /频道3：list4
  },
  mutations: {
    // 修改分类数据
    updateCatagtory (state, payload) {
      state.catagtory = payload // 更新分类数据
    },
    // 更新当前的频道
    updateCurrentCatagtory (state, payload) {
      state.currentCatagtory = payload
    },
    // 更新头条数据 payload 是点击的某一个频道的数据
    updateList (state, payload) {
      // 当我们去更新频道数据的时候， 意味着激活的频道已经获取完毕
      // 应该更新某一个频道  某一频道  => 激活频道  => 点了谁 =》 谁被激活 =》 谁被更新
      // push  unshift
      // state.addData[1] = 2 // 这么写 不是响应式 js无法检测到数据的更新
      // var a = { a: 1, b: 2, c: 3 }
      // var b = { ...a, c: 4 }
      state.allData = { ...state.addData, [state.currentCatagtory]: payload } // 重新换了一个对象 它可以保证数据响应式的更新到组件上
    }
  },
  actions: {
    // context => this.$store
    getCatagtory (context) {
      //  异步 发请求
      // axios.get('http://ttapi.research.itcast.cn/app/v1_0/channels').then(result => {

      // })
      axios.get('http://ttapi.research.itcast.cn/app/v1_0/channels').then(result => {
        // axios默认给数据加了一层data
        context.commit('updateCatagtory', result.data.data.channels)
      })
    },
    // 切换分类的action
    // 第二个参数是当前点击分类 当前的频道id
    changeCatagtory (context, catagtory) {
      // 拿到了当前点击分类
      context.commit('updateCurrentCatagtory', catagtory) // 当点击分类之后 先 激活频道
      // 用接口获取对应的频道数据
      // ios  => 将ios设置成激活频道  => 获取ios的对应的数据
      axios.get(`http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=${catagtory}&timestamp=${new Date().getTime()}&with_top=1`).then(result => {
        context.commit('updateList', result.data.data.results) // 获取的激活的ios的数据
      })
    }
  },
  modules: {
  },
  getters: {
    // 返回当前激活频道的数据
    currentList: state => state.allData[state.currentCatagtory] ? state.allData[state.currentCatagtory] : []
  }
})
